<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" ></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            background-color: #efedd6;
            width: 100%;
            height: 100%;
        }
        .mainDiv{
            width: 100%;
            height: 100%;
             background-color: white;
             /*position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);*/

         }

        .topDiv{
            width: 100%;
            height: 10%;
            background-color: #efedd6;
            position: sticky;
            top: 0;
        }
        .bodyDiv{
            width: 100%;
            height: 80%;
            overflow: scroll;
        }
        .manyDiv{
            background-color: steelblue;
            width: 90%;
            height: 27%;
            border-radius: 50px;
            margin: 8% 5% 8% 5%;
        }
        #bottomDiv{
            width: 100%;
            height: 10%;
            background-color: #efedd6;
            position: fixed;
            left: 0;
        }
    </style>
</head>

<body>
      <div class="mainDiv">
          <div class="topDiv">
              <input type="text" onclick='location.href=("check.html")' style="width: 80px;height: 40px">
          </div>

          <div class="bodyDiv">
              <div class="manyDiv" style="margin: 2% 5% 8% 5%"><h1>hhh</h1></div>
              <div class="manyDiv">
                  <div style="width: 40%;height: 100%;background-color: green">
                  <img src="image/picture_one.png" style="display: block;width: 100%;height: 100%;">
                  </div>

              </div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv"><h1>hhh</h1></div>
              <div class="manyDiv" style="margin: 8% 5% 2% 5%"><h1>hhh</h1></div>


          </div>

          <div id="bottomDiv">
              <button>预约管理</button>
              <button>已预约</button>
          </div>
      </div>
</body>
</html>